<script setup lang="ts">
import { reactive, ref } from 'vue';

import { MindMapContentExample } from '@vben/constants';

import { Button, Textarea } from 'ant-design-vue';

import { $t } from '#/locales';

defineProps<{
  isGenerating: boolean;
}>();
const emits = defineEmits(['submit', 'directGenerate']);
const formData = reactive({
  prompt: '',
});

const generatedContent = ref(MindMapContentExample); // 已有的内容

defineExpose({
  setGeneratedContent(newContent: string) {
    // 设置已有的内容，在生成结束的时候将结果赋值给该值
    generatedContent.value = newContent;
  },
});
</script>
<template>
  <div class="bg-card flex w-80 flex-col rounded-lg p-5">
    <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
      {{ $t('views.ai.mindMap.index.title') }}
    </h3>
    <div class="flex-grow overflow-y-auto">
      <div>
        <b>{{ $t('views.ai.mindMap.index.tips') }}</b>
        <Textarea
          v-model:value="formData.prompt"
          :maxlength="1024"
          :rows="8"
          class="mt-4 w-full"
          :placeholder="$t('views.ai.mindMap.index.promptPlaceholder')"
          show-count
        />
        <Button
          class="mt-4 !w-full"
          type="primary"
          :loading="isGenerating"
          @click="emits('submit', formData)"
        >
          {{ $t('views.ai.mindMap.index.generateAI') }}
        </Button>
      </div>
      <div class="mt-7">
        <b>{{ $t('views.ai.mindMap.index.tips-2') }}</b>
        <Textarea
          v-model:value="generatedContent"
          :maxlength="1024"
          :rows="8"
          class="mt-4 w-full"
          :placeholder="$t('views.ai.mindMap.index.generatedContentPlaceholder')"
          show-count
        />
        <Button
          class="mt-4 !w-full"
          type="primary"
          @click="emits('directGenerate', generatedContent)"
          :disabled="isGenerating"
        >
          {{ $t('views.ai.mindMap.index.generateDirectly') }}
        </Button>
      </div>
    </div>
  </div>
</template>
